<!--
 *
 * File: index.html
 *
 * Copyright (c) 2015, 2016 Oracle and/or its affiliates.
 *
 * You may not use this file except in compliance with the Universal Permissive
 * License (UPL), Version 1.0 (the "License.")
 *
 * You may obtain a copy of the License at https://opensource.org/licenses/UPL.
 *
 * Unless required by applicable law or agreed to in writing, software distributed
 * under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
 * CONDITIONS OF ANY KIND, either express or implied.
 *
 * See the License for the specific language governing permissions and limitations
 * under the License.
 *
-->
<!DOCTYPE html>
<html lang="en">

<!-- Bootstrap template - http://startbootstrap.com/template-overviews/sb-admin-2/ -->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Oracle Coherence Demonstration</title>

    <!-- Bootstrap Core CSS -->
    <link href="javascripts/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="javascripts/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/sb-admin-2.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="javascripts/vendor/morrisjs/morris.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- load angular first to ensure ng-cloak class will work -->
    <script src="javascripts/vendor/angular/angular.js" type="text/javascript"></script>
    <script src="javascripts/vendor/angular/angular-cookies.min.js" type="text/javascript"></script>
</head>

<body ng-app="demoApp" ng-controller="DemoController as demo">

    <div id="wrapper">

        <!-- Navigation -->
        <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0;">

            <div class="navbar-header">
                <a class="navbar-brand" href="index.html">Oracle Coherence</a>
            </div>
            <!-- /.navbar-header -->

            <!-- Control Menu Options -->
            <ul class="nav navbar-top-links navbar-right" ng-cloak>

                <li class="dropdown" >
                    <a href="#"><span id="statusMessage" ng-show="displayStatus" ng-class="{{lastStatusClass}}">{{lastStatusMessage}}</span>&nbsp;</a>
                </li>
                <!-- /.dropdown -->
                <li class="dropdown" ng-show="clusterName != secondaryClusterName">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <!-- <i class="fa fa-globe fa-fw"></i>--> Federation <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li>
                            <a href="#"  ng-click="toggleSecondary()">
                                <i class="fa fa-globe fa-fw" ng-show="federationControlLabel === START_FEDERATION"></i>
                                <i class="fa fa-stop fa-fw"  ng-show="federationControlLabel === STOP_FEDERATION"></i>
                                <span>{{ federationControlLabel }}</span></a>
                        </li>
                        <li ng-show="secondaryCluster == 'enabled'" ng-disabled="federationState == 'STOPPED' || federationState == 'PAUSED'">
                            <a href="#" ng-click="replicateAll()"><i class="fa fa-fast-forward fa-fw"></i> Replicate All </a>
                        </li>
                        <li ng-show="secondaryCluster == 'enabled'">
                            <a href="#" ng-click="toggleFederationState()">
                                <i class="fa fa-pause fa-fw" ng-show="federationStateLabel === SUSPEND_FEDERATION"></i>
                                <i class="fa fa-play  fa-fw" ng-show="federationStateLabel === RESUME_FEDERATION"></i>
                                {{ federationStateLabel }}</a>
                        </li>
                        <li class="divider"  ng-show="secondaryCluster == 'enabled'"></li>
                        <li ng-show="clusterName != secondaryClusterName && secondaryCluster == 'enabled'">
                            <a href="#" ng-click="openSecondary()"><i class="fa fa-sign-out fa-fw"></i><span>{{secondaryClusterName | clusterName}} Dashboard</span></a>
                        </li>
                    </ul>
                    <!-- /.dropdown-user -->
                </li>
                <!-- /.dropdown -->

                <!-- /.dropdown -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        Persistence <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="#" ng-click="persistenceOperation('createSnapshot')"><i class="fa fa-download fa-fw"></i> Create Snapshot</a>
                        </li>
                        <li><a href="#" ng-click="persistenceOperation('recoverSnapshot')"><i class="fa fa-upload fa-fw"></i> Recover Snapshot</a>
                        </li>
                    </ul>
                    <!-- /.dropdown-user -->
                </li>
                <!-- /.dropdown -->

                <!-- /.dropdown -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        Tools <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="#" ng-click="startDeveloper('jvisualvm')" ><i class="fa fa-dashboard fa-fw"></i> Start JVisualVM</a></li>
                        <li class="divider"></li>
                        <li><a href="#" ng-click="startDeveloper('clear')"><i class="fa fa-remove fa-fw"></i> Clear Cache</a></li>
                        <li><a href="#" ng-click="startDeveloper('populate')"><i class="fa fa-repeat fa-fw"></i> Populate Cache</a></li>
                        <li><a href="#" ng-click="addTrades()"><i class="fa fa-plus fa-fw"></i> Add Trades</a></li>
                        <li class="divider" ng-show="clusterName != secondaryClusterName"></li>
                        <li><a href="#" ng-click="startDeveloper('shutdown')"  ng-show="clusterName != secondaryClusterName">
                            <i class="fa fa-sign-out fa-fw"></i> Shutdown</a>
                        </li>
                        <li class="divider"  ng-show="clusterName != secondaryClusterName"></li>
                        <li><a href="#" ng-click="toggleInsightMode()"  ng-show="clusterName != secondaryClusterName">
                            <i class="fa fa-info fa-fw"></i>{{ insightLabel }}</a>
                        </li>
                    </ul>
                    <!-- /.dropdown-user -->
                </li>
                <!-- /.dropdown -->

            </ul>
            <!-- /.navbar-top-links -->

        </nav>

        <!-- Modal -->
        <div class="modal fade" id="insightModal" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">{{ modalHeader }}</h4>
                    </div>
                    <div class="modal-body">
                          <p ng-bind-html="modalContent"></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-success" ng-click="closeSplashScreen('dontDisplaySplash')" ng-show="displayingSplash">Don't Show This Again</button>
                    </div>
                </div>
            </div>
        </div>

        <div id="page-wrapper" style="margin: 0 0 0 0;">
            <div class="row">
                <div class="col-lg-7">
                    <h2 class="page-header"><img src="images/coherence.png" class="pull-left" style="vertical-align:middle"> &nbsp;
                      Coherence Demonstration {{ clusterName | clusterName }} {{ localClusterName | clusterName }}</h2>
                </div>
                <div class="col-lg-5">
                    <div class="pull-right">
                        <div ng-show="secondaryCluster == 'enabled'">
                            <table border="0" cellpadding="0">
                                <tr>
                                    <td>
                                        <span class="blue">Data sent to {{secondaryClusterName | clusterName}}: &nbsp;{{currentBytesSent | memory}}&nbsp;</span>
                                        <insight ng-click="displayInsight('dataSent')" ng-show="showInsight"/>
                                    </td>
                                    <td><div id="federationGraph" style="width: 120px; height: 70px;"></div></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- /.col-lg-12> -->
            </div>

            <!-- /.row -->
            <div class="row">
                <div class="col-lg-6">

                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Portfolio Composition
                            <span><insight ng-click="displayInsight('portfolio')" ng-show="insightEnabled"/></span>
                            <div class="pull-right">
                                <div class="pull-right" role="menu">
                                    Real-Time Price Updates:&nbsp;
                                    <input type="checkbox"
                                            ng-model="portfolioRefresh.enabled"
                                            ng-change="updatePortfolio(portfolioRefresh.enabled)"/>
                                    &nbsp; <insight ng-click="displayInsight('priceUpdates')" ng-show="insightEnabled"/>
                                </div>
                            </div>
                        </div>
                        <!-- /.panel-heading -->

                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <td>Symbol</td>
                                            <td align="right">Price</td>
                                            <td align="right">Positions</td>
                                            <td align="right">Quantity</td>
                                            <td align="right">Value</td>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        <tr ng-repeat="symbol in symbolNames track by symbol"
                                            ng-style="{background: priceChange[symbol] > 0 ? '#B2D9B2' : priceChange[symbol] < 0 ? '#FFCCCC' : ''}">
                                            <td style="width: 90px;">
                                             {{ symbol }}
                                                <i class="icon-circle-arrow-up status-success" ng-show="priceChange[symbol] >  0"></i>
                                                <i class="icon-circle-arrow-down status-error" ng-show="priceChange[symbol] <  0"></i>
                                            </td>
                                            <td style="text-align: right;">{{ currentPrice[symbol] | currency:"$":2 }}</td>
                                            <td style="text-align: right;">{{ symbolCount[symbol] | number }}</td>
                                            <td style="text-align: right;">{{ symbolFrequency[symbol] | number }}</td>
                                            <td style="text-align: right;">{{ symbolFrequency[symbol] * currentPrice[symbol] | currency:"$":0 }}</td>
                                        </tr>
                                        <tr>
                                            <td>&nbsp;</td>
                                            <td style="text-align: right;"><strong>Totals:</strong></td>
                                            <td style="text-align: right;"><strong>{{ positions | number }}</strong></td>
                                            <td style="text-align: right;"><strong>{{ totalFrequency | number }}</strong></td>
                                            <td style="text-align: right;"><strong>{{ valuation | currency:"$":0 }}</strong></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- /.panel-body -->
                    </div>

                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-6 -->

                <div class="col-lg-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Aggregation Performance (<span>Rolling average: {{averageQueryTime}} ms)
                            &nbsp;<insight ng-show="insightEnabled" ng-click="displayInsight('aggregation')"/>
                            </span>
                            <div class="pull-right">
                                <div class="pull-right" role="menu">
                                    Use Indexes:&nbsp;
                                    <input type="checkbox"
                                            ng-model="portfolioRefresh.useIndexes"
                                            ng-change="updateIndexes(portfolioRefresh.useIndexes)"/>
                                    <insight ng-click="displayInsight('index')" ng-show="insightEnabled"/>
                                </div>
                            </div>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div id="aggregationGraph" style="width: auto; height: 310px;">
                            </div>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-6 -->
            </div>

            <!-- /.row -->
            <div class="row">
                <div class="col-lg-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">Data Distribution&nbsp;
                            <insight ng-click="displayInsight('distribution')" ng-show="insightEnabled"/>
                        </div>

                        <!-- /.panel-heading -->
                        <div class="panel-body">

                            <div id="dataDistributionGraph" tyle="width: auto; height: 300px;">
                            </div>

                            <div>
                                (Positions Managed Per Server)
                            </div>

                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->

                </div>

                <div class="col-lg-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <span>Cluster Management {{ clusterName }}
                            </span>
                            <div class="pull-right">
                                <span ng-show="MAXIMUM_SERVERS - memberInfo.length > 0 && !startingMember" >
                                    <button class="btn btn-xs btn-default" ng-click="startMember()">Add Server</button>
                                    <insight ng-click="displayInsight('addServer')" ng-show="insightEnabled"/>
                                </span>

                                <span ng-show="startingMember">Starting Server <img src="images/spinner.gif"/>
                                </span>
                            </div>
                        </div>
                        <!-- /.panel-heading -->

                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <td style="width: 40px">Actions</td>
                                            <td>Servers</td>
                                            <td style="width: 95px" align="right">Memory</td>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        <tr ng-repeat="member in memberInfo track by member.id" class="status-pending">
                                            <td align="center" ng-if="$first"><span><i class="fa fa-dashboard"></i></span></td>
                                            <td align="center" ng-if="!$first">
                                                <div class="btn-group">
                                                    <button class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog"></i></button>
                                                    <ul class="dropdown-menu">
                                                        <li><a href ng-click="stopMember(member.id)">Stop Server</a></li>
                                                    </ul>
                                                </div>
                                            </td>

                                            <td>Server {{ member.id }} <span ng-if="$first">(Dashboard)</span></td>
                                            <td align="right">{{ member.totalMemory - member.freeMemory | memory}}</td>
                                        </tr>
                                        <tr><td colspan="4">&nbsp;</td></tr>
                                    </tbody>

                                </table>
                            </div>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
            </div>

        </div>
        <!-- /#page-wrapper -->

        <hr>
        <div class="col-lg-12">
            <p>© 2016 Oracle Corporation. All Rights Reserved.
            <img class="pull-right" src="images/oracle.png">
        </div>

    </div>
    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="javascripts/vendor/jquery/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="javascripts/vendor/bootstrap/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="javascripts/vendor/metisMenu/metisMenu.min.js"></script>

    <!-- Morris Charts JavaScript -->
    <script src="javascripts/vendor/raphael/raphael-min.js"></script>
    <script src="javascripts/vendor/morrisjs/morris.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="javascripts/sb-admin-2.js"></script>

    <!-- Controller JS -->
    <script src="javascripts/controllers.js"></script>

</body>
</html>
